<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <title>MQTT Test</title>
    <script src="../utils/jquery.js"></script>
    <script src="../../../js/ism_mqttws.js"></script>
    <script src="../js/interchange_client.js"></script>
    <style>
        p { 
            margin-top: 5px;
            margin-bottom: 5px;
        }
        h3 {
            margin-top: 0px;
            margin-bottom: 5px;
            text-align: center;
        }
        div.clear {
            clear: both;
        }
        span.recv {
            color: green;
        }
        span.send {
            color: red;
        }
        div#help {
            display: none;
            border: 1px black dashed;
            background-color: #FEE093;
            padding-left: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            width: 80%;
        }
        .fake-link {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <h2>MQTT Interchange Test</h2>
    <span class="fake-link" id="toggle_help">Show Help</span>
    <div id="help">
        <p>This test page allows you to exercise communication between MQTT (via WebSocket) and JMS, using the request/reply model.</p>
        <p>To create a <b>publisher</b>, do the following:
            <ol>
                <li>Edit the ISM server information and create a client.
                <li>Once the ISM server is up and running, click "Connect".  This sends a MQTT CONNECT message to the ISM server, which triggers an engine call to create a client and session for this MQTT WebSocket connection.
                <li>Set the desired topic in the "&lt;topic_name&gt;" text field.
                <li>Either manually enter (or "Generate") the &lt;replyto&gt; and &lt;corrid&gt; fields.  The replyto topic is the topic name that subscribers to this topic will respond upon receiving the message.  The corrid (correlation ID) is a unique string that associates all responses with this sent message.  (The corrid field should be changed or re-"Generate"d for each sent message).
                <li>Edit the "message", and click "Publish Message".  Alternatively, an array ("Publish Array") [and an object ("Publish Object") -- COMING SOON] can be sent as the message payload.
            </ol>
        </p>
        <p>To create a <b>subscriber</b>, do the following:
            <ol>
                <li>Edit the ISM server information and create a client.
                <li>Once the ISM server is up and running, click "Connect".  This sends a MQTT CONNECT message to the ISM server, which triggers an engine call to create a client and session for this MQTT WebSocket connection.
                <li>Set the subscription topic in the "&lt;topic_name&gt;" text field at the bottom of the client control panel.
                <li>When a message is received on this topic, a response will automatically be published on the message's replyto topic (if set).  If the message's corrid was also set, the corrid of the response will be set to this value.
            </ol>
        </p>
    </div>
    <div id="serverData">
        <table>
            <tr>
                <td>ISM Server Host:</td>
                <td><input type="text" id="host" value="127.0.0.1" /></td>
            </tr>
            <tr>
                <td>ISM Server Port:</td>
                <td><input type="text" id="port" value="16102" /></td>
            </tr>
            <tr>
                <td># Clients:</td>
                <td>
                    <input type="text" size="5" id="client_count" value="3" />
                    <input type="button" id="create_clients" value="Create" />
                </td>
            </tr>
        </table>
    </div>

    <div id="clients" />

</body>
</html>
